<template>
    <section class="ift-container">
        <el-row class="ift-container">
            <el-col :span="3" class="ift-container-col">
                <div class="itfswiper">
                    <div class="itfswiper-top">
                        <span class="press">接口分类</span>
                    </div>
                    <div class="itfswiper-mid">
                        <div class="swiper-container swiper-container-1 swiper-container-horizontal1">
                            <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
                                <swiper-slide  v-for="item in items">{{ item }}</swiper-slide>
                            </swiper>

                        </div>
                    </div>
                    <div class="itfswiper-bottom" >
                        <div style="width: 50%; clear: none;float: left;">
                            <a id="itf_add" class="button button-glow button-border button-rounded button-caution" style="padding:0 10px" @click="swiper_add"><span>新增</span></a>
                        </div>
                        <div style="overflow: hidden">
                            <a id="itf_del" class="button button-glow button-border button-rounded button-highlight" style="padding:0 10px" @click="swiper_del"><span>删除</span></a>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="17" class="ift-container-col">
                <div style="margin-left:10px;height:100%;overflow:auto" v-loading="Oneload">
                    <el-collapse @change="itfchange"  accordion class="ift-collapse">
                      <el-collapse-item v-for="(itf_i,index) in itf_list" :name="index + 1">
                        <template slot="title">
                          <span style="font-size:20px">{{itf_i.name}}</span>
                          <div style="float:right;margin-right:20px;">

                            <i @click.stop="moditf(itf_i.name,itf_i.id,0)" class="el-icon-edit" style="font-size:20px"></i>
                            <i @click.stop="removeitf(itf_i.name,itf_i.id,0)" class="el-icon-delete" style="font-size:20px"></i>
                          </div>

                        </template>
                        <div v-for='itf_u in itf_i.url_list'>
                            <div :class="itf_u.user_load == 0 ? 'head':'head_load'" @click="itf_u.isShow = !itf_u.isShow">
                                <span :class="itf_u.user_load == 0 ? 'http_method':'http_method_load'">
                                    {{itf_u.method}}
                                </span>
                                <span class="path">
                                    {{itf_u.url}}
                                </span>
                                <span class="head_data">
                                    {{itf_u.urlde}}
                                    <i @click.stop="moditf(itf_u.url,itf_u.id,1)" class="el-icon-edit"></i>
                                    <i @click.stop="removeitf(itf_u.url,itf_u.id,1)" class="el-icon-delete"></i>

                                </span>
                            </div>
                            <div v-if="itf_u.isShow" class="itf_onestatus" >
                                <div class="en_main_return">
                                    <span class="en_main_span">响应格式</span>
                                    <span class="en_main_data">{{itf_u.request_format}}</span>
                                </div>
                                <el-form  :show-message="false" status-icon :rules="itf_u.itfruleso"  label-width="0px" class="demo-ruleForm">
                                    <div class="en_main_return">
                                        <el-row style="margin-left:5px;">
                                          <el-col :span="6">
                                              <span class="en_main_span">参数名称</span>
                                          </el-col>
                                          <el-col :span="8">
                                              <span class="en_main_span">值</span>
                                          </el-col>
                                          <el-col :span="4">
                                              <span class="en_main_span">数据类型</span>
                                          </el-col>
                                          <el-col :span="6">
                                              <span class="en_main_span">描述</span>
                                          </el-col>
                                        </el-row>
                                        <el-row style="margin:5px 0 5px 5px" v-for='itf_t in itf_u.tableData'>
                                          <el-col :span="6">
                                              <span class="en_main_data span-table">{{itf_t.param_name}}</span>
                                          </el-col>
                                          <el-col :span="8">
                                            <el-form-item style="margin-bottom:0">
                                            <el-input type="text" v-model="itf_t.param_val" :placeholder="itf_t.mandatory ? '必填':'选填'" style="width:80%"></el-input>
                                            </el-form-item>
                                          </el-col>
                                          <el-col :span="4">
                                            <span class="en_main_data span-table">{{itf_t.data_type}}</span>
                                          </el-col>
                                          <el-col :span="6" >
                                            <span class="en_main_data span-table">{{itf_t.describe}}</span>
                                          </el-col>
                                        </el-row>
                                    </div>
                                    <el-form-item>
                                      <!-- <el-button type="primary" style="width:100px;" @click.native.prevent="handleSubmit2(itf_t.describe)" @click="itf_u.buttonshow = itf_u.buttonshow ? true:true">请求测试</el-button> -->
                                      <el-button type="primary" style="width:100px;" @click="handleSubmit2(itf_u)" >请求测试</el-button>
                                      <a v-if="itf_u.buttonshow" :class="itf_reqstatus" style="color:green" @click="itf_u.buttonshow=!itf_u.buttonshow">隐藏</a>

                                    </el-form-item>
                                    <div v-if="itf_u.buttonshow" :class="itf_reqstatus">
                                        <div class="en_main_return">
                                            <span class="en_main_span">请求url</span>
                                            <span class="en_main_rdata">{{itf_u.url_value}}</span>
                                        </div>
                                        <div class="en_main_return">
                                            <span class="en_main_span">响应数据</span>
                                            <div style="width:100%;overflow:auto;background:#fcf6db">
                                                <span class="en_main_rdata"><pre>{{itf_u.return_value}}</pre></span>
                                            </div>

                                        </div>
                                    </div>
                                </el-form>
                            </div>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                </div>
            </el-col>
            <el-col :span="4" class="ift-container-col">
                <div class="other_sel" style="height:60%;margin-left:10px;">
                    <div  class="other_sel">
                    <span class="sel_title">地址选择</span>
                    <el-select v-model="address_sel_value" placeholder="请选择">
                        <el-option v-for="aitem in address_sel" :key="aitem.value" :label="aitem.label" :value="aitem.value">
                          <span style="float: left">{{ aitem.label }}</span>
                          <i @click.stop="removeaddress(aitem)" class="el-icon-error" style="font-size:21px;float:right;line-height: 34px;margin-left:20px"></i>
                        </el-option>
                    </el-select>
                    </div>
                    <div  class="other_sel">
                    <span class="sel_title">用户选择</span>
                    <el-select v-model="user_sel_value" placeholder="请选择">
                        <el-option v-for="uitem in user_sel" :key="uitem.value" :label="uitem.label" :value="uitem.value">
                          <span style="float: left">{{ uitem.label }}</span>
                          <i @click.stop="removeuser(uitem)" class="el-icon-error" style="font-size:21px;float:right;line-height: 34px;margin-left:20px"></i>
                        </el-option>
                    </el-select>
                    </div>
                </div>
                <div style="width:100%;position:absolute;bottom:0;margin-left:10px;">
                    <el-button type="primary" @click="address_layer" style="margin-top:5px;width:100%" plain>地址添加</el-button>
                    <el-button type="success" @click="userVisible = true" style="margin-top:5px;width:100%" plain>用户添加</el-button>
                    <el-dialog title="用户新增" :close-on-click-modal=false :visible.sync="userVisible">
                      <el-form :model="userform" :rules="userrules" ref="userform">
                        <el-form-item prop="username" label="用户名">
                          <el-input v-model="userform.username" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item prop="password" label="密码">
                          <el-input v-model="userform.password" auto-complete="off"></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="userVisible = false">取 消</el-button>
                        <el-button type="primary" @click.native.prevent="userSubmit">确 定</el-button>
                      </div>
                    </el-dialog>
                    <el-button type="info" style="margin-top:5px;width:100%" @click="itf_judge" plain>接口添加</el-button>
                    <el-dialog title="新增接口" :close-on-click-modal=false :visible.sync="urlVisible">
                      <el-form :model="urlform" :rules="urlrules" ref="urlform" label-position="left" label-width="80px">
                          <el-row :gutter="20">
                            <el-col :span="9"><div class="grid-content bg-purple">
                                <!-- <el-form-item prop="method" label="请求格式">
                                  <el-input v-model="urlform.method" auto-complete="off"></el-input>
                                </el-form-item> -->
                                <el-form-item label="请求格式">
                                    <el-select v-model="urlform.method" placeholder="请选择请求格式">
                                      <el-option label="POST" value="POST"></el-option>
                                      <el-option label="GET" value="GET"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="9"><div class="grid-content bg-purple">
                                <!-- <el-form-item prop="request_format" label="数据类型">
                                  <el-input v-model="urlform.request_format" auto-complete="off"></el-input>
                                </el-form-item> -->
                                <el-form-item label="数据类型">
                                    <el-select v-model="urlform.request_format" placeholder="请选择数据类型">
                                      <el-option label="JSON" value="JSON"></el-option>
                                      <el-option label="XML" value="XML"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">
                                <el-form-item label="是否登陆">
                                  <el-switch v-model="urlform.user_load"></el-switch>
                                </el-form-item>
                            </div></el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item prop="url" label="接口">
                                  <el-input v-model="urlform.url" auto-complete="off"></el-input>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item prop="urlde" label="描述">
                                  <el-input v-model="urlform.urlde" auto-complete="off"></el-input>
                                </el-form-item>
                            </div></el-col>
                          </el-row>
                          <el-row :gutter="20">
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <el-input v-model="url_pararms.param_name" placeholder="请输入参数" auto-complete="off"></el-input>
                            </div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <el-input v-model="url_pararms.describe" placeholder="请输入描述" auto-complete="off"></el-input>
                            </div></el-col>
                            <el-col :span="5"><div class="grid-content bg-purple">
                                <el-input v-model="url_pararms.data_type" placeholder="请输入值类型" auto-complete="off"></el-input>
                            </div></el-col>
                            <el-col :span="6"><div class="grid-content bg-purple">
                                <el-form-item label="是否必填">
                                  <el-switch v-model="url_pararms.mandatory"></el-switch>
                                </el-form-item>
                            </div></el-col>
                            <el-col :span="3"><div class="grid-content bg-purple">
                                <el-button @click="params_request">提交</el-button>
                            </div></el-col>
                          </el-row>
                          <el-table :data="url_table" style="width: 100%" max-height="180">
                            <el-table-column prop="param_name" label="参数" width="150"></el-table-column>
                            <el-table-column prop="describe" label="描述" width="120"></el-table-column>
                            <el-table-column prop="data_type" label="值类型" width="120"></el-table-column>
                            <el-table-column prop="mandatory" label="是否必填" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.mandatory ? 'primary' : 'success'" close-transition>{{scope.row.mandatory ? "是" : "否"}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button @click.native.prevent="deleteRow(scope.$index, url_table)" type="text" size="small">移除</el-button>
                                </template>
                            </el-table-column>
                          </el-table>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="reseturlForm">重 置</el-button>
                        <el-button @click="urlVisible = false">取 消</el-button>
                        <el-button type="primary" @click.native.prevent="urlSubmit">确 定</el-button>
                      </div>
                    </el-dialog>
                    <el-button type="success" @click="totalVisible = true" style="margin-top:5px;width:100%" plain>组添加</el-button>
                    <el-dialog title="组新增" :close-on-click-modal=false :visible.sync="totalVisible">
                      <el-form :model="totalform" :rules="totalrules" ref="totalform">
                        <el-form-item prop="itf_name" label="组名">
                          <el-input v-model="totalform.itf_name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item prop="itf_de" label="描述">
                          <el-input v-model="totalform.itf_de" auto-complete="off"></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="totalVisible = false">取 消</el-button>
                        <el-button type="primary" @click.native.prevent="totalSubmit">确 定</el-button>
                      </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>

    </section>
</template>

<script>
    // import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import { groupops,getotherdata, getItfList, getItfreturn,delinterface,modinterface,modvalue,otheradd,otherdel } from '../../api/api';

    var click_status = 0;
    var c_index="";

    export default {
        name: 'carrousel',
        components: {
            swiper,
            swiperSlide
          },
        data() {
          return {
            itf_list:[
                // {id:1,name:'1',url_list:[{id:1,method:'post',url:'/app/comment/add.do',urlde:'商圈动态评论刷新',request_format:'JSON',isShow:false,buttonshow:false,tableData:[{param_name:'regionId',param_val:'',describe:'地区编号',data_type:'int',mandatory:true},{param_name:'pageId',param_val:'',describe:'页码编号',data_type:'int',mandatory:false}]},{id:2,method:'post',url:'/app/comment/add.do',urlde:'商圈动态评论刷新',request_format:'JSON',isShow:false,buttonshow:false,itfformo:{regionId:'',describe:''},itfruleso:{regionId:[{required:true,message:'请输入',trigger:'blur'}]},tableData:[{param_name:'regionId',describe:'地区编号',data_type:'int',mandatory:true},{param_name:'pageId',describe:'页码编号',data_type:'int',mandatory:false}]}]},
            ],
            swiperOption: {
              notNextTick: true,
              direction: 'vertical',
              speed: 200,
              slidesPerView: 6,
              mousewheel: true,
              on:{
                click: function(sdata){
                    if (click_status == 0){
                        click_status = 1;
                    }
                },
              },
            },
            sel_item_name:"",
            del_item_name:"",
            total_id:"",
            title_name:"111111111111",
            interface_name:"",
            items:[],
            address_sel:[{
                  value: "1",
                  label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
                }, {
                  value: "2",
                  label: '双皮奶'
                }, {
                  value: "3",
                  label: '蚵仔煎'
                }],
            address_sel_value:"1",
            user_sel:[{
                  value: 1,
                  label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
                }, {
                  value: 2,
                  label: '龙须面'
                }],
            user_sel_value:1,
            Oneload:true,
            itf_onestatus:'en_main',
            itf_reqstatus:'en_main_req',
            itfformo: {
              regionId: ''
            },
            itfruleso: {
              regionId: [
                { required: true, message: '请输入', trigger: 'blur' },
              ]
            },
            userVisible:false,
            urlVisible:false,
            totalVisible: false,
            userform: {
              username: '',
              password: '',
            },
            userrules: {
              username: [
                { required: true, message: '请输入账号', trigger: 'blur' },
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
              ]
            },
            opt_type: "add",
            mod_id:0,
            urlform: {
                method:"",
                url:"",
                urlde:"",
                request_format:"",
                user_load:false,
                params_list:[]
            },
            url_pararms:{
                param_name:"",
                describe:"",
                data_type:"",
                mandatory:false
            },
            url_table:[],
            urlrules: {
              method: [
                { required: true, message: '请输入请求类型', trigger: 'blur' },
              ],
              url: [
                { required: true, message: '请输入接口', trigger: 'blur' },
              ],
              urlde: [
                { required: true, message: '请输入接口详解', trigger: 'blur' },
              ],
              request_format: [
                { required: true, message: '请输入返回数据类型', trigger: 'blur' },
              ]
            },
            totalform: {
                itf_name:"",
                itf_de:""
            },
            totalrules: {
              itf_name: [
                { required: true, message: '请输入组名', trigger: 'blur' },
              ],
              itf_de: [
                { required: true, message: '请输入描述', trigger: 'blur' },
              ]
            },
          }
        },
        // watch:{
        //   urlform:{
        //     handler:function (val, oldVal) {
        //       console.log(val, oldVal)
        //     },
        //     deep: true
        //   }
        // },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        // created(){
        //     let _newdata = this
        //     // _newdata.items = ["group"]
        //     let para = {}
        //     getotherdata(para).then(data => {
        //         _newdata.items = data["group_list"]
        //     })
        // },
        mounted(){
            let _myswiper = this
            _myswiper.swiper.on('doubleTap', function(){
                _myswiper.onSlideclick(_myswiper.swiper.clickedSlide.innerText)
            })
            _myswiper.swiper.on('click', function(){
                _myswiper.dbSlideclick(_myswiper.swiper.clickedSlide.innerText)
            })
            let para = {}
            getotherdata(para).then(data => {
                _myswiper.items = data["group_list"]
                _myswiper.sel_item_name = data["group_list"][0]
                _myswiper.getItf(data["group_list"][0])
            })
            // console.log(_myswiper.items[0])
            // _myswiper.getItf(_myswiper.items[0])
        },
        methods: {
            onclicks: function(swiper){
                console.log(1111)
            },
            onSlideclick(c_data){
                this.getItf(c_data)
            },
            dbSlideclick(c_data){
                this.del_item_name = c_data

            },
            swiper_del: function() {
                if (click_status == 1){
                    let rmtxt = "是否删除" + this.del_item_name + "项"
                    this.$confirm(rmtxt, '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                        let para = {
                            gname:this.del_item_name,
                            type:1
                          };
                        groupops(para).then(data => {
                            if (data["status"] == 0){
                                this.$message({
                                    type: 'success',
                                    message: this.del_item_name + '接口已删除！'
                                });
                                this.items = data["group_list"]
                                // this.swiper.removeSlide(this.swiper.clickedIndex);
                                click_status = 0;
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: this.del_item_name + '接口删除失败！'
                                });
                            }
                        })

                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });
                    });
                } else {
                    this.$message('请选中需要删除的模块！');
                }
            },
            swiper_add(){
                console.log("######")
                this.$prompt('请输入接口名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    console.log(value)
                    if (value == null || value == ""){
                        this.$message({
                            type: 'error',
                            message: '不允许为空'
                        });
                    } else if (this.items.indexOf(value) >= 0 ){
                        this.$message({
                            type: 'error',
                            message: '名称重复，请修改!'
                        });
                    }else {
                        let para = {
                            gname:value,
                            type:0
                          };
                        groupops(para).then(data => {
                            if (data["status"] == 0){
                                this.$message({
                                    type: 'success',
                                    message: '接口名称: ' + value
                                });
                                this.items = data["group_list"]
                                // this.items.push(value)
                                this.swiper.update()
                            }
                        })

                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            itfchange(activeNames){
                console.log(Number(activeNames))
                if (activeNames > 0){
                    this.total_id = this.itf_list[activeNames-1].id
                }else{
                    this.total_id = ""
                }
            },
            removeitf(itf_name,itf_id,type){
                let open_data = "是否删除" + itf_name + "接口";
                this.$confirm(open_data, '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {

                      console.log(itf_name,itf_id);
                      let para = {
                        itf_name:itf_name,
                        itf_id:itf_id,
                        name:this.sel_item_name,
                        type:type
                      };
                      delinterface(para).then(data => {
                        if (data["status"] == 0){
                            this.itf_list = data["itf_list"]
                            this.$message({
                              type: 'success',
                              message: '删除成功!'
                            });
                        }else{
                           this.$message({
                              type: 'error',
                              message: '删除失败!'
                            });
                        }
                      })

                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });
                });
            },

            moditf(t_name,t_id,t_type){
              if (t_type == 0){
                this.$prompt('请输入名称', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      inputValue:t_name,
                      inputPattern:/^[A-Za-z]+：[\u4e00-\u9fa5]*$/,
                      inputErrorMessage: '格式不正确'
                    }).then(({ value }) => {
                      console.log(t_name)
                      let para = {
                        id:t_id,
                        name: this.sel_item_name,
                        new_name:value,
                        type:t_type
                      };
                      modinterface(para).then(data => {
                        if (data["status"] == 0){
                            this.itf_list = data["itf_list"]
                            this.$message({
                              type: 'success',
                              message: '修改成功!'
                            });
                        }else{
                           this.$message({
                              type: 'error',
                              message: '修改失败!'
                            });
                        }
                      })

                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消修改'
                      });
                });
              }else if (t_type == 1){
                let para = {
                  id:t_id,
                  name: this.sel_item_name,
                  itfname:t_name,
                  type:t_type
                };
                modvalue(para).then(data => {
                  if (data["status"] == 0){
                    this.urlform = data["urlform"],
                    this.url_table = data["url_table"],
                    this.opt_type = "mod"
                    this.mod_id = data["id"],
                    this.urlVisible = true
                  }else{
                    this.$message({
                      type: 'error',
                      message: '操作失败！'
                    });
                  }
                })
              }

            },
            getItf(idata){
                let para = {
                    classification_name: idata,
                };

                getItfList(para).then(data => {
                    this.Oneload=false
                    console.log(data["itf_list"])
                    this.itf_list = data["itf_list"]
                    this.sel_item_name = idata
                    this.address_sel_value = data["address_sel_value"]
                    this.address_sel = data["address_sel"]
                    this.user_sel_value = data["user_sel_value"]
                    this.user_sel = data["user_sel"]
                })
            },
            handleSubmit2(hdata,tid) {
                console.log(hdata)
                let tbdata=hdata.tableData
                let buttonstatus = hdata.buttonshow
                let r_open=[]
                let r_open_data=""
                let r_itf_data = {}
                for (var i=0; i<tbdata.length;i++){
                    let trdata = tbdata[i]
                    if (trdata.mandatory && trdata.param_val==""){
                        r_open.push(trdata.param_name)
                    }else{
                        if (trdata.param_val != ""){
                            r_itf_data[trdata.param_name] = trdata.param_val
                        }
                    }
                }
                if (r_open.length == 0){
                    console.log(r_itf_data)
                    let para = {
                        lid: hdata.id,
                        params:r_itf_data
                    };
                    getItfreturn(para).then(data => {
                        console.log(data,11)
                        if (data["status"] == 0){
                            hdata.buttonshow=true
                            hdata.url_value=data["url"]
                            hdata.return_value=data["request_data"]
                        }
                    })
                }else{
                    r_open_data = "以下参数必填："+JSON.stringify(r_open)
                    this.$message(r_open_data);
                }
            },
            handleSubmit3(){
                // this.itf_reqstatus='en_main_req_none'
            },
            removeaddress(a_data){
                let para = {
                    type:0,
                    id:a_data.value,
                    gname:this.sel_item_name
                }
                otherdel(para).then(data => {
                    console.log(data)
                })
            },
            removeuser(u_data){
                let para = {
                    type:1,
                    id:u_data.value,
                    gname:this.sel_item_name
                }
                otherdel(para).then(data => {
                    console.log(data)
                })
            },
            address_layer(){
                this.$prompt('请输入域名或IP地址', '添加', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      inputPattern:/[a-zA-z]+:\/\/[^\s]*/,
                      inputErrorMessage: '格式不正确,例如：http://192.168.1.1/group'
                    }).then(({ value }) => {
                      let para = {
                        gname:this.sel_item_name,
                        address:value,
                        type:0
                      };
                      otheradd(para).then(data => {
                        if (data["status"] == 0){
                            this.address_sel_value = data["address_sel_value"]
                            this.address_sel = data["address_sel"]
                            this.$message({
                              type: 'success',
                              message: '添加成功!'
                            });
                        }else{
                           this.$message({
                              type: 'error',
                              message: '添加失败!'
                            });
                        }
                      })

                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消修改'
                      });
                });
            },
            userSubmit(ev) {
                var _this = this;
                this.$refs.userform.validate((valid) => {
                    console.log(valid)
                    if (valid) {
                        let para = {
                            data:this.userform,
                            type:1,
                            gname:this.sel_item_name
                        }
                        otheradd(para).then(data => {
                            if (data["status"] == 0){
                                this.user_sel_value = data["user_sel_value"]
                                this.user_sel = data["user_sel"]
                                this.$refs.userform.resetFields();
                                this.userVisible = false
                                this.$message({
                                  type: 'success',
                                  message: '添加成功!'
                                });
                            }else{
                               this.$message({
                                  type: 'error',
                                  message: '添加失败!'
                                });
                            }
                        })

                    }else {

                    }
                })
            },
            params_request(){
                let url_err_list = []
                for (var i in this.url_pararms){
                    console.log(i,this.url_pararms[i])
                    if (this.url_pararms[i] == "" && this.url_pararms[i]) {
                        url_err_list.push(i)
                    }
                }
                if (url_err_list.length != 0){
                    let err_txt = url_err_list.join() + "的值不能为空!"
                    console.log(err_txt)
                    this.$message({
                      type: 'error',
                      message: err_txt
                    });
                }else{
                    this.url_table.push(this.url_pararms)
                    this.url_pararms = {
                        param_name:"",
                        describe:"",
                        data_type:"",
                        mandatory:false
                    }
                }
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
                console.log(this.url_table)
            },
            itf_judge(){
                if (this.total_id == ""){
                    this.$message({
                      type: 'info',
                      message: '请选择接口所属组!'
                    });
                }else{
                    this.urlVisible = true
                    this.opt_type = "add"
                }
            },
            urlSubmit(ev) {
                this.$refs.urlform.validate((valid) => {
                    console.log(valid)
                    if (valid) {

                        this.urlform.params_list = this.url_table
                        console.log(JSON.stringify(this.urlform))
                        let para = {
                            data:JSON.stringify(this.urlform),
                            c_id: this.total_id,
                            type:2,
                            gname:this.sel_item_name,
                            opt_type: this.opt_type,
                            mod_id: this.mod_id
                        }
                        otheradd(para).then(data => {
                            if (data["status"] == 0){
                                this.itf_list = data["itf_list"]
                                // this.$refs.urlform.resetFields();
                                this.urlform = {
                                    method:"",
                                    url:"",
                                    urlde:"",
                                    request_format:"",
                                    user_load:false,
                                    params_list:[]
                                },
                                this.url_table=[]
                                this.urlVisible = false
                                this.$message({
                                  type: 'success',
                                  message: '添加成功!'
                                });

                            }else if (data["status"] == 2){
                               this.$message({
                                  type: 'error',
                                  message: 'url重复，添加失败!'
                                });
                            }else{
                                this.$message({
                                  type: 'error',
                                  message: '添加失败!'
                                })
                            }
                        })


                    }else {
                        console.log("数据缺失")
                    }
                })
            },
            reseturlForm(){
                // this.$refs.urlform.resetFields();
                this.urlform = {
                    method:"",
                    url:"",
                    urlde:"",
                    request_format:"",
                    user_load:false,
                    params_list:[]
                },
                this.url_table=[]
            },
            totalSubmit(ev){
                this.$refs.totalform.validate((valid) => {
                    console.log(valid)
                    if (valid) {
                        let para = {
                            data:this.totalform,
                            type:3,
                            gname:this.sel_item_name
                        }
                        otheradd(para).then(data => {
                            if (data["status"] == 0){
                                this.itf_list = data["itf_list"]
                                this.$refs.totalform.resetFields();
                                this.totalVisible = false
                                this.$message({
                                  type: 'success',
                                  message: '添加成功!'
                                });

                            }else{
                               this.$message({
                                  type: 'error',
                                  message: '添加失败!'
                                });
                            }
                        })


                    }else {
                        console.log("2@")
                    }
                })
            }

          }
      }




</script>
<style scoped>
    @import "../../assets/css/buttons.css";

    /* css重写 */
    .el-button+.el-button {
        margin-left: 0;
    }
    /* css */


    .ift-container-col{
        margin:0;
        height:100%;
        position:relative;
    }
    .ift-container{+
        margin:0;
        width:100%;
        height: 100%;
    }
    .swiper-container-1 {
        position: absolute;
        width: 100%;
        height: 100%;
        margin-left:0;
        margin-right:0;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        overflow:hidden;
        margin-top:1px;
        margin-bottom: 1px;

        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-container-horizontal1{
    }
    .swiper-slide-color1 {
    }

    .itfswiper {
        position: absolute;;
        top:10px;
        bottom: 5px;
        /* height: 90%; */
        width: 100%;
        border-left:1px solid #000;
        border-right:1px solid #000;
        border-top:1px solid #000;
    }

    .itfswiper-top{
        width: 100%;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
        background: #2f4056;
    }
    .itfswiper-mid{
        width: 100%;
        height: 80%;
        position: relative;
    }
    .itfswiper-bottom{
        width: 100%;
        height: 10%;
        margin-top:5px;
        text-align: center;
    }
    .press {
        font-size:20px;
        display: inline-block;
        font-weight: bold;
        color: #def;
        text-shadow: 0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;
        -webkit-filter: url(#diff1);
        filter: url(#diff1);
    }
    .ift-collapse{
        margin: 10px 20px 0 20px;
    }
    span{
        font-size:16px;

    }
    .span-table{
        line-height: 40px;
    }
    .head{
        width:100%;
        height:30px;
        line-height:30px;
        margin: 10px 0 10px 0;
        background:#e9fffb;
        border:1px solid #c3e8e3;
    }
    .head_load{
        width:100%;
        height:30px;
        line-height:30px;
        margin: 10px 0 10px 0;
        background:#70ff66;
        border:1px solid #c3e8e3;
    }
    .http_method{
        background:#1098a5;
        color:#fff;
        padding: 7px 10px 7px 10px;
    }
    .http_method_load{
        background:#5bb037;
        color:#fff;
        padding: 7px 10px 7px 10px;
    }
    .path{
        padding-left:10px;
    }
    .head_data{
        float:right;
        margin-right:10px;
    }
    .en_main_none{
        width:100%;
        height:auto;
        background:transparent;
        display:none;
    }
    .en_main{
        width:100%;
        height:auto;
        background:transparent;
    }
    .en_main_span{
        width:99%;
        color:#10a54a;
        display:block;
        padding-left:1%;
        border-bottom: 1px solid #c3e8e3;
    }
    .en_main_data{
        padding-left:1%;
        font-weight:600;
    }
    .en_main_return{
        margin: 10px 0 10px 5px;
    }
    .en_main_rdata{
        width:99%;
        background:#fcf6db;
        display:block;
        padding-left:1%;
    }
    .en_main_req_none{
        display:none;
    }
    .en_main_req{

    }

    .other_sel{
        /* height:100%; */
        width:100%;
        margin-top:10px;
        text-align:center;
    }
    .sel_title{
        padding: 0 0 15px 0;
    }










    ::-webkit-scrollbar
    {
        width: 3px;
        height: 3px;
        background-color: transparent;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px transparent;
        border-radius: 10px;
        background-color: transparent;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #fff;
    }
</style>